<template>
  <div class="dashboard-container">
    <div class="approval-card">
      <el-row type="flex" justify="end" style="height: 36px" align="middle">
        <el-button size="small" type="primary" @click="toAddApproval">新建流程</el-button>
      </el-row>
      <el-table ref="tableObj" v-loading="loading" row-key="id" :data="list" style="width: 100%" stripe="" border="" @row-click="clickRow">
        <el-table-column label="流程名称" prop="name" />
        <el-table-column align="center" label="版本号" prop="version" width="100px" />
        <el-table-column align="center" label="流程key" prop="processDefinitionKey" />
        <el-table-column width="120" align="center" label="操作" fixed="right">
          <template v-if="!scope.row.isGroup" slot-scope="scope">
            <!-- 跳到审批流程的详情接口 -->
            <el-button size="small" type="text" @click="toApprovalDetail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getBPMDefineList } from '@/api/approval'
export default {
  name: 'Dashboard',
  data() {
    return {
      loading: false,
      list: []
    }
  },
  created() {
    this.getBPMDefineList()
  },
  methods: {
    // 点击某一个行的数据
    clickRow(row) {
      this.$refs.tableObj.toggleRowExpansion(row)
    },
    async getBPMDefineList() {
      this.loading = true
      const { records } = await getBPMDefineList({})
      this.list = this.transListToTreeData(records)
      this.loading = false
    },
    transListToTreeData(list) {
      const arr = []
      list.forEach(item => {
        const node = arr.find(bpm => bpm.processDefinitionKey === item.processDefinitionKey)
        if (node) {
          node.children.push(item)
        } else {
          const newNode = { isGroup: true, children: [item], name: item.name, id: Math.random(), processDefinitionKey: item.processDefinitionKey }
          arr.push(newNode)
        }
      })
      return arr
    },
    // 跳到流程设计的详情页
    toApprovalDetail(row) {
      this.$router.push(`/approval/design/${row.deploymentId}`)
    },
    // 去新增流程
    toAddApproval() {
      this.$router.push(`/approval/design?type=add`)
    }
  }
}
</script>
<style lang="scss">
.approval-card {
   margin: 20px
}
    .pageList {
      text-align: right;
      padding: 10px 0;
      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }
      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }
</style>
